<template>
  <view class="page-demo">
    <!-- 骨架屏 -->
    <template v-if="loading">
      <view class="sk-container">
        <view class="page-demo">
          <view class="info">
            <view class="info-left">
              <image class="info-img sk-image"></image>
            </view>
            <view class="info-center">
              <view
                class="info-title sk-transparent sk-text-13-8889-229 sk-text"
                >个人信息完善</view
              >
              <view
                class="info-subtitle sk-transparent sk-text-15-6250-408 sk-text"
                >完善个人信息，收取祝福红包</view
              >
            </view>
            <view class="info-right">
              <button
                class="info-btn sk-transparent sk-button sk-pseudo sk-pseudo-circle"
              >
                去完善
              </button>
            </view>
          </view>
        </view>
      </view>
    </template>

    <template v-else>
      <view class="info">
        <view class="info-left">
          <image class="info-img" src="@/static/info.png" />
        </view>
        <view class="info-center">
          <view class="info-title">个人信息完善</view>
          <view class="info-subtitle">完善个人信息，收取祝福红包</view>
        </view>
        <view class="info-right">
          <button class="info-btn">去完善</button>
        </view>
      </view>
    </template>
  </view>
  <uni-notice-bar
    single
    scrollable
    showIcon
    text="本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。"
  ></uni-notice-bar>
</template>

<script lang="ts" setup>
import { onMounted, ref } from "vue";

const loading = ref(true);

onMounted(() => {
  setTimeout(() => {
    loading.value = false;
  }, 3000);
});
</script>

<style lang="scss">
.page-demo {
  .info {
    display: flex;
    align-items: center;
    margin: 18rpx 40rpx 0;
    height: 106rpx;
    background: #ffffff;
    border-radius: 53rpx;
    border: 2rpx solid #f1f1f1;
    &-left {
      margin-left: 30rpx;
      width: 78rpx;
      height: 70rpx;
    }
    &-img {
      display: block;
      width: 100%;
      height: 100%;
    }
    &-right {
      margin-right: 30rpx;
    }
    &-btn {
      width: 118rpx;
      height: 44rpx;
      line-height: 44rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #ffffff;
      background: #465eab;
      border-radius: 22rpx;
    }
    &-center {
      padding: 0 16rpx;
      flex: 1;
    }
    &-title {
      height: 36rpx;
      line-height: 36rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #333333;
    }
    &-subtitle {
      height: 32rpx;
      line-height: 32rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: #999999;
    }
  }
}

.sk-transparent {
  color: transparent !important;
}
.sk-text-13-8889-229 {
  background-image: linear-gradient(
    transparent 13.8889%,
    #eeeeee 0%,
    #eeeeee 86.1111%,
    transparent 0%
  ) !important;
  background-size: 100% 36rpx;
  position: relative !important;
}
.sk-text {
  background-origin: content-box !important;
  background-clip: content-box !important;
  background-color: transparent !important;
  color: transparent !important;
  background-repeat: repeat-y !important;
}
.sk-text-15-6250-408 {
  background-image: linear-gradient(
    transparent 15.625%,
    #eeeeee 0%,
    #eeeeee 84.375%,
    transparent 0%
  ) !important;
  background-size: 100% 32rpx;
  position: relative !important;
}
.sk-button {
  color: #efefef !important;
  background: #efefef !important;
  border: none !important;
  box-shadow: none !important;
}
.sk-image {
  background: #efefef !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
  background: #efefef !important;
  background-image: none !important;
  color: transparent !important;
  border-color: transparent !important;
}
.sk-pseudo-rect::before,
.sk-pseudo-rect::after {
  border-radius: 0 !important;
}
.sk-pseudo-circle::before,
.sk-pseudo-circle::after {
  border-radius: 50% !important;
}
.sk-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
}
</style>
